import React, {useState} from "react";
import {Form, Input, Button, Checkbox, message} from "antd";
import MyIcon from "@/components/icon";
import './index.scss'

const Login1: React.FC<any> = () => {

  const [loading, setLoading] = useState<boolean>(false);

  const onFinish = () => {

  }

  return (
    <div className="login-container">
      <div className="wrapper">
        <div className="title">react-ant-admin</div>
        <div className="welcome">欢迎使用，请先登录</div>
        <Form
          className="login-form"
          initialValues={{
            remember: true,
            // ...getLocalUser(),
          }}
          onFinish={onFinish}
        >
          <Form.Item name="account" rules={[{required: true, message: "请输入用户名"}]}>
            <Input prefix={<MyIcon type="icon_nickname"/>} placeholder="账号:admin/user"/>
          </Form.Item>
          <Form.Item name="pswd" rules={[{required: true, message: "请输入密码"}]}>
            <Input prefix={<MyIcon type="icon_locking"/>} type="password" placeholder="密码:admin123/user123"/>
          </Form.Item>
          <Form.Item>
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox>记住我</Checkbox>
            </Form.Item>
          </Form.Item>
          <Form.Item className="btns">
            <Button
              type="primary"
              htmlType="submit"
              className="login-form-button"
              loading={loading}
            >
              登录
            </Button>
            <Button htmlType="reset">重置</Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}

export default Login1
